<template>
  <div class="left">
    <div class="btn">
      <button>
        <i class="iconfont icon-tianjia"></i>
        添加到歌单
      </button>
      <button>
        <i class="iconfont icon-shanchu"></i>
        删除
      </button>
      <button>
        <i class="iconfont icon-xiazai1"></i>
        下载
      </button>
      <button>
        <i class="iconfont icon-qingkong"></i>
        清空列表
      </button>
    </div>
    <el-table
      :data="playStoreSonglist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="30"> </el-table-column>
      <el-table-column width="40">
        <!-- 如果此歌曲正在播放就显示那个玩意 -->
        <template scope="{row}">
          <img
            src="../../../assets/images/playing.gif"
            alt=""
            style="margin-left: 10px"
            v-if="playStoreCurrentSong.id == row.id && playStoreIsPlaying"
          />
        </template>
      </el-table-column>
      <el-table-column type="index" width="30"> </el-table-column>
      <el-table-column label="歌曲" width="500">
        <template scope="{row}" show-overflow-tooltip>
          <div class="song">
            <!-- 歌曲名字 -->
            <span class="name">{{ row.name }}</span>
            <!-- 歌曲别名 -->
            <span class="alia" v-if="row.alia.length != 0">{{
              row.alia[0]
            }}</span>
            <!-- 是否是mv -->
            <i v-if="row.mv != 0" class="iconfont icon-MV mv"></i>
            <!-- 是否是 vip 歌曲 -->
            <i class="iconfont icon-VIP-" v-if="row.fee == 1"> </i>
            <div class="song_bt">
              <div @click="bofangSong(row.id)">
                <i class="iconfont icon-bofang" title="播放"></i>
              </div>
              <div>
                <i class="iconfont icon-tianjia" title="添加到歌单"></i>
              </div>
              <div>
                <i class="iconfont icon-xiazai1" title="下载"></i>
              </div>
              <div>
                <i
                  class="iconfont icon-fenxiang"
                  style="font-size: 20px"
                  title="分享"
                ></i>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="歌手" width="200" show-overflow-tooltip>
        <template scope="{row}">
          <div class="author one_txt_cut">
            <span v-for="item in row.ar" :key="item.id">{{ item.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" label="时长" show-overflow-tooltip>
        <template scope="{row}">
          <div class="dt">
            {{ formatDt(row.dt) }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "left",
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    //  选择按钮改变的时候
    selectionChange(item) {
      console.log(item);
    },
    // 格式化 歌曲时长
    formatDt(time) {
      return moment(time).format("mm:ss");
    },
    bofangSong(id) {
      let link = this.$router.resolve({
        path: `/player/${id}`, //要跳转的路由
      });
      window.open(link.href, "player"); //打开新窗口
      sessionStorage.setItem("open", true);
    },
  },
  computed: {
    ...mapState({
      playStoreSonglist: (state) => state.playerStore.songsList,
      playStoreCurrentSong: (state) => state.playerStore.currentSong,
      playStoreIsPlaying: (state) => state.playerStore.isPlaying,
    }),
  },
};
</script>

<style lang="less" scoped>
.left {
  /deep/ .el-table {
    background-color: transparent !important;
    color: #ffffff;
  }
  /deep/ .el-table::before {
    height: 0px;
  }
  /deep/ .el-table thead {
    background-color: transparent !important;
    color: #e1e1e1cc;
    font-weight: normal;
  }
  /deep/ .el-table thead th {
    background-color: transparent !important;
  }
  /deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  /deep/ .el-table tr {
    background-color: transparent !important;
  }
  /deep/ .el-table__body tr:hover > td.el-table__cell {
    // background-color: transparent !important;
    background-color: hsla(0, 0%, 100%, 0.05);
    // cursor: pointer;
  }
  /deep/ .el-table td.el-table__cell {
    border-bottom: none;
  }
  /deep/ .el-table .cell {
    // 移除  overflow 属性
    overflow: unset;
  }

  /deep/ .el-checkbox__label {
    display: none;
  }
  /deep/ .el-checkbox {
    margin-right: 0;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: @globalColor;
    border-color: @globalColor;
  }
  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: @globalColor;
    border-color: @globalColor;
  }
  width: 900px;
  height: 100%;
  padding-top: 20px;
  .btn {
    padding-bottom: 15px;
    button {
      i {
        margin-right: 5px;
      }
      padding: 10px 14px;
      border-radius: 8px;
      background: none;
      border: 1px solid #aeaeae;
      color: #ffffff;
      margin-right: 10px;
      &:hover {
        border-color: @globalColor;
        color: @globalColor;
      }
    }
  }
  .song {
    position: relative;
    &:hover .song_bt {
      opacity: 1;
    }
    .name {
      &:hover {
        color: @globalColor;
        cursor: pointer;
      }
    }
    .alia {
      margin-left: 10px;
      font-size: 12px;
      color: #999999;
    }
    .mv,
    .icon-VIP- {
      margin-left: 6px;
      font-size: 22px;
      padding: 5px;
      color: @globalColor;
      &:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        cursor: pointer;
      }
    }
    .icon-VIP- {
      font-size: 14px;
    }
    .song_bt {
      display: flex;
      opacity: 0;
      position: absolute;
      right: 20px;
      top: 0;
      height: 30px;
      > div {
        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        width: 30px;
        height: 30px;
        color: #999999;
        &:hover {
          border: 1px solid @globalColor;
          color: @globalColor;
          cursor: pointer;
        }
      }
    }
  }
  .author {
    span {
      margin-right: 5px;
      &:hover {
        cursor: pointer;
        color: @globalColor;
      }
    }
  }
}
</style>
